<template>
	<view>
		<!-- 轮播 -->
		<swiper class="swiper" circular :autoplay="true" :interval="3500" :duration="1100">
			<swiper-item>
				<image class="img" src="@/static/imgs/tjyl.jpg" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="content my-recycle">
			<view class="top">
				<view class="title">我的回收</view>
				<view @click="goAndEvaluate">换一个卖>></view>
			</view>
			<view class="cont">
				<image src="@/static/imgs/gj.png" mode="aspectFill"></image>

				<view>
					<view class="name">{{ device }}</view>
					<view class="text">预计最高可卖：</view>
					<view class="bottom box-s">
						<view class="money">
							¥
							<text>???</text>
						</view>
						<view class="btn show_animation" @click="goAndEvaluate">立刻变现</view>
					</view>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="title">回收流程与指南</view>

			<view class="menu-list">
				<view class="menu">
					<template v-for="(item, index) in menuList">
						<uni-icons v-if="index" type="right" color="#999999" size="20" class="mt-32"></uni-icons>
						<view :key="index" :class="{ active: menuIndex == index }" @click="menuIndex = index">
							<image :src="`/static/icon/${item.icon}.png`" mode="aspectFit"></image>
							<view>{{ item.title }}</view>
						</view>
					</template>
				</view>
				<view class="collapse">
					<uni-collapse accordion show-arrow show-animation>
						<uni-collapse-item v-for="(item, index) in menuList[menuIndex].list" :key="index" :title="item.title">
							<view class="desc">{{ item.desc }}</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>

				<view class="qr-code">
					<view class="left">
						<image class="icon" src="/static/icon/kf.png" mode="aspectFill"></image>
						<view>
							<view class="subtitle">扫二维码联系专项客服</view>
							<view>电话咨询：{{ customerService.mobile }}</view>
						</view>
					</view>
					<image class="code" :src="customerService.image" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<swiper class="swiper2" circular :autoplay="true" :interval="3500" :duration="1100">
			<swiper-item>
				<image class="img" src="@/static/imgs/zyhs.png" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<view class="content record-list">
			<view class="box-e">
				<view class="title">成交记录</view>
				<view class="title-text">历史交易记录实时查看</view>
			</view>

			<view class="list" v-for="(item, index) in list" :key="index">
				<view>{{ item.name }}</view>
				<view>{{ item.time }}</view>
				<view class="price">¥{{ item.money }}</view>
			</view>
		</view>

		<view class="footer-btn show_animation" @click="goAndEvaluate">测一测你的手机值多少钱</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			menuIndex: 0,
			menuList: [
				{
					title: '在线估价',
					icon: 'd-zxgj',
					list: [
						{
							title: '1.快递费包邮么?',
							desc: '自主发货请选择顺丰快递，邮费为到付，由远望回收承担(不包含保价费用)~若您的描述与我们实际收到的机器大相径庭，我们将会以顺丰到付进行退回，望请理解。'
						},
						{
							title: '2.多久可以卖出?',
							desc: '收到机器【48小时】内，我们会完成验机并出价，确认成交价后平台会当天打款至您预留的收款帐户，1秒到帐。'
						},
						{
							title: '3.预估价格是最终成交价吗?',
							desc: '预估价格是您根据机器情况做的评估，如果与机器检测结果完成一致，我们将按照预估价格进行回收。'
						}
					]
				},
				{
					title: '下单寄出',
					icon: 'd-xdjc',
					list: [
						{
							title: '1.寄出前，我需要做什么准备?',
							desc: '请做好数据备份并把各类帐号和密码清除，恢复出厂设置;请保持机器处于有电状态，便于更快质检回收;自行寄件，请做好包裹防护。'
						},
						{
							title: '2.寄出后不想卖了，可以取消吗?',
							desc: '如果机器已寄出，您可以联系顺丰的客服，要求退回:如果验机中心已收到您的机器，在验机结束后，您可以选择“不卖了“退回，平台不收取服务费。'
						},
						{
							title: '3.哪些机器不能卖?',
							desc: '仿制机器、更换过序列号的机器、开启丢失模式的机器，是无法售卖的。'
						}
					]
				},
				{
					title: '专业质检',
					icon: 'd-zyzj',
					list: [
						{
							title: '1.验机需要多长时间?',
							desc: '收件后48小时内完成验机并报价(大促期间除外)。'
						},
						{
							title: '2.验机会检测哪些方面?',
							desc: '验机会检测保修期、网络制式、购买渠道、外观、设备密码设备功能等方面。'
						},
						{
							title: '3.验机需要拆机吗?',
							desc: '我们会对部分型号手机打开屏募盖板，检查手机是否有进水或者拆修情况，不影响您的二次回收和官方的保修服务。若机器功能异常或是无法开机，验机工程师会拆机检查，不会对机器造成损伤。'
						}
					]
				},
				{
					title: '急速打款',
					icon: 'd-jsdk',
					list: [
						{
							title: '1.打款后，多久到帐?',
							desc: '确认成交后平台会在当天打款至您预留的收款帐户，1秒到帐。'
						},
						{
							title: '2.机器一定能回收吗?',
							desc: '验机后，平台将根据您机器的验机结果出价，如果您接受该价格，平台会在当天打款至您预留的收款帐户，1秒到帐。'
						},
						{
							title: '3.不想卖了怎么办?',
							desc: '在验机结束后，您可以选择“不卖了“进行退回，平台不收取服务费。'
						}
					]
				}
			],
			customerService: {
				image: '',
				mobile: ''
			},
			device: '--',
			list: []
		};
	},
	computed: {},
	onLoad() {
		try {
			const res = uni.getSystemInfoSync();
			this.device = res.model;
			console.log(`设备型号：${res.model}, 操作系统：${res.system}, 屏幕尺寸：${res.screenWidth}x${res.screenHeight}`);
		} catch (error) {
			console.error('获取设备信息失败：', error);
		}
	},
	onShow: function () {
		this.getCustomerService();
		this.list = [];
		this.getList();
	},
	onReachBottom() {},
	onPullDownRefresh() {},
	onShareAppMessage(e) {},
	methods: {
		async goAndEvaluate() {
			let login = await this.$api.checkLogin();
			if (!login) return;
			uni.navigateTo({
				url: '/pages/recycle/category'
			});
		},

		async getCustomerService() {
			const data = await this.$api.request('/base/getcontact', 'POST');
			this.customerService = data;
			uni.setStorageSync('CustomerService', data);
		},

		// 获取成交记录
		async getList() {
			const data = await this.$api.request('/backorder/backorderdemo', 'POST');
			this.list = data;
		}
	}
};
</script>

<style lang="scss">
.footer-btn {
	background-color: $main-color;
	position: fixed;
	bottom: 166rpx;
	color: #fff;
	padding: 10rpx 36rpx;
	border-radius: 99px;
	width: 500rpx;
	text-align: center;
	left: 125rpx;
	box-shadow: 6rpx 6rpx 10rpx 0px rgba(0, 0, 0, 0.1);
}

.menu-list {
	.menu {
		margin-top: 26rpx;
		display: grid;
		grid-template-columns: 1fr 40rpx 1fr 40rpx 1fr 40rpx 1fr;
		font-size: 28rpx;
		color: #999;
		text-align: center;

		image {
			width: 80rpx;
			height: 80rpx;
			filter: grayscale(100%);
		}

		.active {
			color: $main-color;

			image {
				filter: grayscale(0%);
			}
		}
	}

	.collapse {
		margin-top: 20rpx;

		.desc {
			color: #999;
			padding-bottom: 30rpx;
		}
	}

	.qr-code {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0 15rpx;

		.left {
			font-size: 24rpx;
			color: #999;
			flex: 1;
			display: flex;
			align-items: center;
			column-gap: 20rpx;

			.icon {
				width: 100rpx;
				height: 100rpx;
			}

			.subtitle {
				font-size: 28rpx;
				font-weight: 600;
				margin-bottom: 10rpx;
			}
		}

		.code {
			width: 160rpx;
			height: 160rpx;
		}
	}

	::v-deep .uni-collapse-item__title-box {
		padding: 0;

		.uni-collapse-item__title-text {
			font-size: 30rpx;
			color: #666;
		}
	}
}

// 成交记录
.record-list {
	color: #999;

	.title-text {
		font-size: 16rpx;
		color: #666;
	}

	.list {
		font-size: 22rpx;
		display: grid;
		grid-template-columns: 1fr 150rpx 90rpx;
		margin-top: 18rpx;

		.price {
			color: $main-color;
			text-align: right;
		}
	}
}

// 我的回收

.my-recycle {
	margin-top: -40px !important;
	position: relative;
	z-index: 99;

	.top {
		color: #999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		margin-bottom: 18rpx;
	}

	.cont {
		display: grid;
		grid-template-columns: 160rpx 1fr;
		column-gap: 30rpx;

		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 99rpx;
		}

		.name {
			font-size: 30rpx;
		}

		.name::before {
			content: '本机';
			background-color: $main-color;
			color: #fff;
			font-size: 22rpx;
			padding: 5rpx 15rpx;
			border-radius: 99rpx;
			margin-right: 15rpx;
		}

		.text {
			font-size: 26rpx;
			color: #999;
			margin: 10rpx 0 10rpx;
		}

		.bottom {
			.money {
				color: $main-color;
				font-size: 36rpx;
				font-weight: 600;

				text {
					font-size: 52rpx;
				}
			}

			.btn {
				background-color: $main-color;
				color: #fff;
				font-size: 28rpx;
				padding: 15rpx 20rpx;
				border-radius: 99px;
				margin-right: 15rpx;
			}
		}
	}
}

.content {
	margin: 30rpx 30rpx;
	padding: 25rpx;
	background-color: #fff;
	border-radius: 18rpx;
	overflow: hidden;
	box-shadow: 6rpx 6rpx 10rpx 0px rgba(0, 0, 0, 0.1);

	.title {
		font-weight: 600;
		font-size: 34rpx;
		color: #333;
	}
}

.swiper {
	width: 100%;
	height: 650rpx;

	image {
		width: 100%;
		height: 100%;
	}
}

.swiper2 {
	margin: 0rpx 30rpx;
	box-sizing: border-box;
	width: calc(100% - 60rpx);
	height: 280rpx;
	border-radius: 18rpx;
	overflow: hidden;
	background-color: #fff;

	image {
		width: 100%;
		height: 100%;
	}
}
</style>

<style>
page {
	background-color: #f5f5f5;
}
</style>
